<template>
	<div class="article">

		<!-- 面包屑组件 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>文章列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片组件 -->
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>卡片名称</span>
			</div>
			<!-- 内部表格 -->
			<el-table :data="articleList" stripe style="width: 100%">
				<el-table-column label="标题" width="480px">
					<template slot-scope='scope'>
						{{scope.row.title}}
					</template>
				</el-table-column>

				<el-table-column label="类型" width="180px">
					<template slot-scope='scope'>
						{{scope.row.type==1?'文章':'视频'}}
					</template>
				</el-table-column>

				<el-table-column label="封面" width="180px">
					<template slot-scope='scope'>
						<el-image style="width: 100px; height: 100px" :src="scope.row.cover[0] && scope.row.cover[0].url | imgUrl" fit="cover">
						</el-image>

					</template>
				</el-table-column>

				<el-table-column prop="name" label="作者" width="180">
					<template slot-scope='scope'>
						{{scope.row.user.nickname}}
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>

			</el-table>
			<!-- 分页器 -->
			<div class="pagination_block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageIndex" :page-sizes="[4, 6, 8, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import {
		getPostApi,
	} from '../../apis/news.js'
	export default {
		data() {
			return {
				articleList: [],
				total: null,
				pageSize: 6,
				pageIndex: 1,
			}
		},

		async created() {
			this.total = (await getPostApi({
				pageSize: 1000
			})).data.data.length;
			this.init();
		},
		
		methods: {
			async init() {
				const res = await getPostApi({
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.articleList = res.data.data;
				console.log(this.articleList);
			},

			handleDelete(index, row) {
				this.articleList.splice(index, 1);
			},
			handleEdit(index, row) {
				this.$router.push({path: `/home/articlepost/${row.id}`})
			},


			handleSizeChange(e) {
				this.pageSize = e;
				this.init();
			},


			handleCurrentChange(e) {
				this.pageIndex = e;
				this.init();
			}
		},
	}
</script>

<style lang="less" scoped>
	.article {

		margin: 0;
		padding: 0;


		.el-card {
			width: 80%;
			margin-top: 60px;


			/deep/.el-table {

				.el-table_1_column_1 {

					.cell {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}
			}

			.text {
				font-size: 14px;
			}

			.item {
				margin-bottom: 18px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both
			}

			.pagination_block {
				text-align: center;
				margin-top: 20px;
			}
		}
	}
</style>
